React์ cloneElement์ ๋ํ ์ข ํฉ ๊ฐ์ด๋. ๊ณ ๊ธ ์ปดํฌ๋ํธ ์กฐ์์ ์ํ ์ฌ์ฉ ์ฌ๋ก, ์ด์ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ค๋ฃน๋๋ค.
React cloneElement: ์์ ์์ ๋ฐ ์์ฑ ์ฃผ์ ๋ง์คํฐํ๊ธฐ
์ญ๋์ ์ธ React ๊ฐ๋ฐ ์ธ๊ณ์์ ์ ์ฐํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ๋ ค๋ฉด ์ปดํฌ๋ํธ ์กฐ์ ๊ธฐ์ ์ ๋ง์คํฐํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ฌ์ฉ ๊ฐ๋ฅํ ๋ค์ํ ๋๊ตฌ ์ค React.cloneElement๋ ์๋ณธ ์ปดํฌ๋ํธ์ ์ ์๋ฅผ ์ง์ ๋ณ๊ฒฝํ์ง ์๊ณ React ์์๋ฅผ ์์ ํ๊ณ ์์ฑ์ ์ฃผ์
ํ๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ผ๋ก ๋๋ณด์
๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ถ๋ณ์ฑ์ ์ด์งํ๊ณ ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ์ ํฅ์์ํต๋๋ค. ์ด ๊ธ์์๋ cloneElement์ ๋ณต์ก์ฑ์ ๊น์ด ํ๊ณ ๋ค์ด ๊ทธ ์ฌ์ฉ ์ฌ๋ก, ์ด์ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ํ์ํ ๊ฒ์
๋๋ค.
React ์์์ ์ปดํฌ๋ํธ ์ดํดํ๊ธฐ
cloneElement์ ๋ํด ์์๋ณด๊ธฐ ์ ์, React ์์์ ์ปดํฌ๋ํธ์ ๋ํ ํ์คํ ์ดํด๋ฅผ ๋ค์ ธ๋ด
์๋ค. React์์ ์ปดํฌ๋ํธ๋ UI๋ฅผ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์กฐ๊ฐ์ผ๋ก, ๋ ์๊ณ ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ๋ถ๋ถ์ผ๋ก ๋๋ ์ ์์ต๋๋ค. ์ปดํฌ๋ํธ๋ ํจ์ํ ๋๋ ํด๋์ค ๊ธฐ๋ฐ์ผ ์ ์์ผ๋ฉฐ, React ์์๋ฅผ ๋ ๋๋งํฉ๋๋ค.
React ์์๋ DOM ๋ ธ๋๋ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ฅผ ์ค๋ช ํ๋ ์์ํ JavaScript ๊ฐ์ฒด์ ๋๋ค. ํ๋ฉด์ ๋ฌด์์ด ๋ํ๋์ผ ํ๋์ง์ ๋ํ ๊ฐ๋ฒผ์ด ํํ์ ๋๋ค. React ์์๋ ๋ถ๋ณ(immutable)ํ๋ฉฐ, ์์ฑ๋ ํ์๋ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค. ์ด ๋ถ๋ณ์ฑ์ React์ ํต์ฌ ์์น์ด๋ฉฐ ์์ธก ๊ฐ๋ฅํ ๋์์ ๋ณด์ฅํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์์:
const element = React.createElement(
'h1',
{ className: 'greeting' },
'Hello, world!'
);
์ด ์ฝ๋๋ <h1> ํ๊ทธ์ "greeting" ํด๋์ค ์ด๋ฆ, "Hello, world!" ํ
์คํธ๋ฅผ ๋ํ๋ด๋ React ์์๋ฅผ ์์ฑํฉ๋๋ค.
React.cloneElement ์๊ฐ
React.cloneElement๋ ๊ธฐ์กด ์์๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์๋ก์ด React ์์๋ฅผ ์์ฑํ ์ ์๊ฒ ํด์ฃผ๋ ํจ์์
๋๋ค. ํต์ฌ์ ์ธ ์ฐจ์ด์ ์ cloneElement๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ณธ ์์์ ์ํฅ์ ์ฃผ์ง ์๊ณ ์ ์์์ props(์์ฑ)๋ฅผ ์์ ํ ์ ์๋ค๋ ๊ฒ์
๋๋ค. ์ด๋ ๋ถ๋ณ์ฑ์ ์ ์งํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
cloneElement์ ๊ตฌ๋ฌธ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
React.cloneElement(
element,
[props],
[...children]
)
- element: ๋ณต์ ํ๋ ค๋ React ์์์ ๋๋ค.
- props (์ ํ ์ฌํญ): ๋ณต์ ๋ ์์์ ๋ณํฉํ๋ ค๋ ์ props๋ฅผ ํฌํจํ๋ ๊ฐ์ฒด์ ๋๋ค. ์ด props๋ ๋์ผํ ์ด๋ฆ์ ๊ฐ์ง ๊ธฐ์กด props๋ฅผ ๋ฎ์ด์๋๋ค.
- children (์ ํ ์ฌํญ): ๋ณต์ ๋ ์์์ ์ ์์ ์์์ ๋๋ค. ์ ๊ณต๋๋ฉด ์๋ณธ ์์์ ์์์ ๋์ฒดํฉ๋๋ค.
cloneElement์ ์ฌ์ฉ ์ฌ๋ก
cloneElement๋ ์ฌ๋ฌ ์๋๋ฆฌ์ค์์ ํนํ ์ ์ฉํฉ๋๋ค:
1. ์์ ์ปดํฌ๋ํธ์ Props ์ถ๊ฐ ๋๋ ์์
๊ฐ์ฅ ์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก ์ค ํ๋๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ์ props๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ ์์ ํด์ผ ํ ๋์ ๋๋ค. ์ด๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ตฌ์ถํ ๋ ํนํ ์ ์ฉํฉ๋๋ค.
Button ์ปดํฌ๋ํธ๊ฐ ์๊ณ ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ๋์ ์ผ๋ก onClick ํธ๋ค๋ฌ๋ฅผ ์ถ๊ฐํ๋ ค๋ ์๋๋ฆฌ์ค๋ฅผ ์๊ฐํด ๋ด
์๋ค.
function Button(props) {
return ;
}
function ParentComponent() {
const handleClick = () => {
alert('Button clicked!');
};
return (
{React.cloneElement(, { onClick: handleClick })}
);
}
์ด ์์ ์์ cloneElement๋ Button ์ปดํฌ๋ํธ์ onClick ํธ๋ค๋ฌ๋ฅผ ์ถ๊ฐํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ Button ์ปดํฌ๋ํธ ์์ฒด๋ฅผ ์์ ํ์ง ์๊ณ ๋ฒํผ์ ๋์์ ์ ์ดํฉ๋๋ค.
2. ๊ณต์ Props๋ฅผ ๊ฐ์ง ์ปดํฌ๋ํธ ์ปฌ๋ ์ ๋ ๋๋ง
์ปดํฌ๋ํธ์ ๋ชฉ๋ก์ด๋ ์ปฌ๋ ์
์ ๋ ๋๋งํ ๋ cloneElement๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ ์ปดํฌ๋ํธ์ ๊ณต์ props๋ฅผ ์ฃผ์
ํจ์ผ๋ก์จ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๊ณ ์ฝ๋ ์ค๋ณต์ ์ค์ผ ์ ์์ต๋๋ค.
function ListItem(props) {
return {props.children} ;
}
function List(props) {
const items = React.Children.map(props.children, child => {
return React.cloneElement(child, { color: props.textColor });
});
return {items}
;
}
function App() {
return (
Item 1
Item 2
Item 3
);
}
์ฌ๊ธฐ์ List ์ปดํฌ๋ํธ๋ ์์(ListItem ์ปดํฌ๋ํธ)์ ์ํํ๋ฉฐ cloneElement๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ ListItem์ textColor prop์ ์ฃผ์
ํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ชจ๋ ๋ชฉ๋ก ํญ๋ชฉ์ด List ์ปดํฌ๋ํธ์ ์ ์๋ ๋์ผํ ํ
์คํธ ์์์ ๊ฐ๋๋ก ๋ณด์ฅํฉ๋๋ค.
3. ๊ณ ์ฐจ ์ปดํฌ๋ํธ (HOCs)
cloneElement๋ ๊ณ ์ฐจ ์ปดํฌ๋ํธ(HOCs)๋ฅผ ๊ตฌํํ๋ ๋ฐ ์ค์ํ ์ญํ ์ ํฉ๋๋ค. HOC๋ ์ปดํฌ๋ํธ๋ฅผ ์ธ์๋ก ๋ฐ์ ์๋กญ๊ณ ํฅ์๋ ์ปดํฌ๋ํธ๋ฅผ ๋ฐํํ๋ ํจ์์
๋๋ค. ์ด๋ ์ฝ๋ ์ฌ์ฌ์ฉ ๋ฐ ์ปดํฌ๋ํธ ํฉ์ฑ์ ์ํ ๊ฐ๋ ฅํ ํจํด์
๋๋ค.
์ปดํฌ๋ํธ์ ๋ก๊น ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ HOC๋ฅผ ์๊ฐํด ๋ด ์๋ค:
function withLogging(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log('Component mounted:', WrappedComponent.name);
}
render() {
return React.cloneElement( );
}
};
}
function MyComponent(props) {
return Hello, {props.name}!;
}
const EnhancedComponent = withLogging(MyComponent);
function App() {
return ;
}
์ด ์์ ์์ withLogging HOC๋ MyComponent๋ฅผ ๊ฐ์ธ๊ณ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ๋ ๋ ์ฝ์์ ๋ฉ์์ง๋ฅผ ๊ธฐ๋กํฉ๋๋ค. cloneElement๋ ์๋ณธ props์ ํจ๊ป ๋ํ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๋ ๋ฐ ์ฌ์ฉ๋์ด ํฅ์๋ ์ปดํฌ๋ํธ๊ฐ ์์๋๋ก ์๋ํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
4. ๋ณตํฉ ์ปดํฌ๋ํธ (Compound Components)
๋ณตํฉ ์ปดํฌ๋ํธ๋ ์ํ์ ๋์์ ์๋ฌต์ ์ผ๋ก ๊ณต์ ํ๊ธฐ ์ํด ํจ๊ป ์๋ํ๋ ์ปดํฌ๋ํธ๋ค์
๋๋ค. cloneElement๋ ๊ณต์ ์ํ๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์์ ์ปดํฌ๋ํธ์ ์ฃผ์
ํ๋ ๋ฐ ์ ์ฉํ ์ ์์ต๋๋ค.
class Tabs extends React.Component {
constructor(props) {
super(props);
this.state = { activeTab: props.defaultActiveTab || 0 };
}
handleTabClick = (index) => {
this.setState({ activeTab: index });
};
render() {
const { activeTab } = this.state;
const children = React.Children.map(this.props.children, (child, index) => {
return React.cloneElement(child, {
isActive: index === activeTab,
onClick: () => this.handleTabClick(index),
});
});
return (
{children}
);
}
}
function Tab(props) {
return (
);
}
function App() {
return (
Tab 1
Tab 2
Tab 3
);
}
์ด ์์ ์์ Tabs ์ปดํฌ๋ํธ๋ ํ์ฑ ํญ ์ํ๋ฅผ ๊ด๋ฆฌํฉ๋๋ค. cloneElement๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ Tab ์ปดํฌ๋ํธ์ isActive prop๊ณผ onClick ํธ๋ค๋ฌ๋ฅผ ์ฃผ์
ํฉ๋๋ค. ๊ทธ๋ฌ๋ฉด Tab ์ปดํฌ๋ํธ๋ ์ด๋ฌํ props๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ ํ ์คํ์ผ๊ณผ ๋์์ผ๋ก ํญ ๋ฒํผ์ ๋ ๋๋งํฉ๋๋ค.
cloneElement ์ฌ์ฉ์ ์ด์
- ๋ถ๋ณ์ฑ:
cloneElement๋ ์๋ณธ ์์๊ฐ ๋ณ๊ฒฝ๋์ง ์๋๋ก ๋ณด์ฅํ์ฌ ๋ถ๋ณ์ฑ๊ณผ ์์ธก ๊ฐ๋ฅํ ๋์์ ์ด์งํฉ๋๋ค. - ์ฌ์ฌ์ฉ์ฑ: ํต์ฌ ์ ์๋ฅผ ๋ณ๊ฒฝํ์ง ์๊ณ ์ปดํฌ๋ํธ๋ฅผ ์์ ํ ์ ์๊ฒ ํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ ๋ถ๋ถ์์ ๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ฒ ๋ง๋ญ๋๋ค.
- ์ ์ฐ์ฑ: ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ์ props๋ฅผ ์ฃผ์ ํ๊ณ ๋์์ ์ฌ์ฉ์ ์ ์ํ ์ ์๋ ์ ์ฐํ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
- ์ฝ๋ ๋ช
ํ์ฑ:
cloneElement๋ฅผ ์ฌ์ฉํ๋ฉด ๋ถ๋ชจ์ ์์ ์ปดํฌ๋ํธ์ ๊ด์ฌ์ฌ๋ฅผ ๋ช ํํ๊ฒ ๋ถ๋ฆฌํ์ฌ ๋ ๊นจ๋ํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ์ฝ๋๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
cloneElement ์ฌ์ฉ ์ ๋ชจ๋ฒ ์ฌ๋ก
- ์ ์คํ๊ฒ ์ฌ์ฉํ๊ธฐ:
cloneElement๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ด์ง๋ง, ์ ์คํ๊ฒ ์ฌ์ฉํด์ผ ํฉ๋๋ค. ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ๋ณต์กํ๊ณ ์ดํดํ๊ธฐ ์ด๋ ค์ด ์ฝ๋๋ก ์ด์ด์ง ์ ์์ต๋๋ค. - ๋์ ๊ณ ๋ คํ๊ธฐ:
cloneElement๋ฅผ ์ฌ์ฉํ๊ธฐ ์ ์ prop ๋๋ฆด๋ง์ด๋ ์ปจํ ์คํธ์ ๊ฐ์ ๋ค๋ฅธ ์ ๊ทผ ๋ฐฉ์์ด ๋ ์ ์ ํ ์ ์๋์ง ๊ณ ๋ คํ์ญ์์ค. - ์ฝ๋ ๋ฌธ์ํํ๊ธฐ: ๋ค๋ฅธ ๊ฐ๋ฐ์๊ฐ ๋น์ ์ ์๋๋ฅผ ์ดํดํ ์ ์๋๋ก ์ฝ๋์์
cloneElement๋ฅผ ์ฌ์ฉํ๋ ๋ชฉ์ ์ ๋ช ํํ๊ฒ ๋ฌธ์ํํ์ญ์์ค. - ์ฒ ์ ํ๊ฒ ํ ์คํธํ๊ธฐ: ์ฒ ์ ํ ๋จ์ ํ ์คํธ๋ฅผ ์์ฑํ์ฌ ์ฝ๋๊ฐ ์์๋๋ก ์๋ํ๋์ง ํ์ธํ์ญ์์ค.
ํผํด์ผ ํ ์ผ๋ฐ์ ์ธ ์ค์
- ์ค์ํ Props ๋ฎ์ด์ฐ๊ธฐ: ์์ ์ปดํฌ๋ํธ๊ฐ ์์กดํ๋ ์ค์ํ props๋ฅผ ๋ฎ์ด์ฐ์ง ์๋๋ก ์ฃผ์ํ์ญ์์ค. ์ด๋ ์๊ธฐ์น ์์ ๋์์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
- ์์ ์์ ์ ๋ฌ ์์ด๋ฒ๋ฆฌ๊ธฐ: ์๋ณธ ์์์ ์์์ ๋ณด์กดํ๋ ค๋ ๊ฒฝ์ฐ
cloneElement์ ์ ๋ฌํด์ผ ํฉ๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ์์ ์์๊ฐ ์์ค๋ฉ๋๋ค. - ๋ถํ์ํ๊ฒ cloneElement ์ฌ์ฉํ๊ธฐ: props๋ฅผ ์ง์ ์ ๋ฌํ๋ ๊ฒ๊ณผ ๊ฐ์ ๋ ๊ฐ๋จํ ํด๊ฒฐ์ฑ
์ผ๋ก ์ถฉ๋ถํ ๋
cloneElement๋ฅผ ์ฌ์ฉํ์ง ๋ง์ญ์์ค.
cloneElement์ ๋์
cloneElement๋ ์ ์ฉํ ๋๊ตฌ์ด์ง๋ง, ํน์ ์๋๋ฆฌ์ค์์ ์ ์ฌํ ๊ฒฐ๊ณผ๋ฅผ ์ป์ ์ ์๋ ๋์์ ์ธ ์ ๊ทผ ๋ฐฉ์์ด ์์ต๋๋ค:
1. Prop ๋๋ฆด๋ง (Prop Drilling)
Prop ๋๋ฆด๋ง์ ์ปดํฌ๋ํธ ํธ๋ฆฌ์ ์ฌ๋ฌ ๋ ๋ฒจ์ ํตํด props๋ฅผ ์ ๋ฌํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ฅํฉํ ์ ์์ง๋ง, ์ดํดํ๊ธฐ ์ฌ์ด ๊ฐ๋จํ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค.
2. Context API
Context API๋ฅผ ์ฌ์ฉํ๋ฉด ๋ชจ๋ ๋ ๋ฒจ์์ ์๋์ผ๋ก props๋ฅผ ์ ๋ฌํ ํ์ ์์ด ์ปดํฌ๋ํธ ํธ๋ฆฌ ์ ์ฒด์์ ์ํ์ ๋ฐ์ดํฐ๋ฅผ ๊ณต์ ํ ์ ์์ต๋๋ค. ์ด๋ ์ ์ญ ๋ฐ์ดํฐ๋ ํ ๋ง๋ฅผ ๊ณต์ ํ๋ ๋ฐ ํนํ ์ ์ฉํฉ๋๋ค.
3. ๋ ๋ ํ๋กญ (Render Props)
๋ ๋ ํ๋กญ์ ์ปดํฌ๋ํธ๊ฐ ํจ์๋ฅผ prop์ผ๋ก ๋ฐ๊ณ ๊ทธ ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์ถ๋ ฅ์ ๋ ๋๋งํ๋ ํจํด์ ๋๋ค. ์ด๋ฅผ ํตํด ์ปดํฌ๋ํธ์ ์ฌ์ฉ์ ์ ์ ๋ ๋๋ง ๋ก์ง์ ์ฃผ์ ํ ์ ์์ต๋๋ค.
4. ํฉ์ฑ (Composition)
์ปดํฌ๋ํธ ํฉ์ฑ์ ์ฌ๋ฌ ์ปดํฌ๋ํธ๋ฅผ ๊ฒฐํฉํ์ฌ ๋ ๋ณต์กํ UI๋ฅผ ๋ง๋๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด๋ React์ ๊ธฐ๋ณธ ํจํด์ด๋ฉฐ ์ข
์ข
cloneElement์ ๋์์ผ๋ก ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
์ค์ ์ฌ๋ก ๋ฐ ์ผ์ด์ค ์คํฐ๋
cloneElement์ ์ค์ ์ ์ฉ ์ฌ๋ก๋ฅผ ์ค๋ช
ํ๊ธฐ ์ํด ๋ช ๊ฐ์ง ์ค์ ์์ ์ ์ผ์ด์ค ์คํฐ๋๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
1. ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ํผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ตฌ์ถ
์กฐ์ง์ ์ํด ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ํผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ตฌ์ถํ๋ค๊ณ ์์ํด ๋ณด์ญ์์ค. ํ ์คํธ ์ ๋ ฅ, ๋๋กญ๋ค์ด, ์ฒดํฌ๋ฐ์ค์ ๊ฐ์ ์ฌ์ ๊ตฌ์ถ๋ ํผ ์ปดํฌ๋ํธ ์ธํธ๋ฅผ ์ ๊ณตํ๊ณ ์ถ์ต๋๋ค. ๋ํ ๊ฐ๋ฐ์๊ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ฒด๋ฅผ ์์ ํ์ง ์๊ณ ๋ ์ด๋ฌํ ์ปดํฌ๋ํธ์ ๋์์ ์ฌ์ฉ์ ์ ์ํ ์ ์๋๋ก ํ๊ณ ์ถ์ต๋๋ค.
cloneElement๋ ์ ํ๋ฆฌ์ผ์ด์
์ฝ๋์์ ํผ ์ปดํฌ๋ํธ๋ก ์ฌ์ฉ์ ์ ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ์ ํจ์ฑ ๊ฒ์ฌ ๋ก์ง์ ์ฃผ์
ํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ๋ฐ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํฌํฌํ๊ฑฐ๋ ์์ ํ ํ์ ์์ด ํน์ ์๊ตฌ์ ๋ง๊ฒ ํผ ์ปดํฌ๋ํธ๋ฅผ ์กฐ์ ํ ์ ์์ต๋๋ค.
2. ํ ๋ง ์ ๊ณต์(Theme Provider) ๊ตฌํ
ํ ๋ง ์ ๊ณต์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒด์ ์ผ๊ด๋ ๋ชจ์๊ณผ ๋๋์ ์ ๊ณตํ๋ ์ปดํฌ๋ํธ์ ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก Context API๋ฅผ ์ฌ์ฉํ์ฌ ํ ๋ง ๊ด๋ จ ๋ฐ์ดํฐ๋ฅผ ํ์ ์ปดํฌ๋ํธ์ ๊ณต์ ํฉ๋๋ค.
cloneElement๋ ๋ฒํผ์ด๋ ํ
์คํธ ํ๋์ ๊ฐ์ ํน์ ์ปดํฌ๋ํธ์ ํ
๋ง ๊ด๋ จ props๋ฅผ ์ฃผ์
ํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ๋ณ ์ ์๋ฅผ ์์ ํ์ง ์๊ณ ๋ ํ์ฌ ํ
๋ง์ ๋ฐ๋ผ ์ด๋ฌํ ์ปดํฌ๋ํธ์ ๋ชจ์์ ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค.
3. ๋์ ํ ์ด๋ธ ์ปดํฌ๋ํธ ์์ฑ
๋์ ํ ์ด๋ธ ์ปดํฌ๋ํธ๋ ๋ค์ํ ์์ค์ ๋ฐ์ดํฐ๋ฅผ ํ ํ์์ผ๋ก ๋ ๋๋งํ ์ ์๋ ์ปดํฌ๋ํธ์ ๋๋ค. ์ด ์ปดํฌ๋ํธ๋ ๋ค์ํ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ์ฒ๋ฆฌํ๊ณ ๋ค์ํ ์ ํ์ ์ด์ ํ์ํ ์ ์์ ๋งํผ ์ ์ฐํด์ผ ํฉ๋๋ค.
cloneElement๋ ์์ ํจ์๋ ์ฌ์ฉ์ ์ ์ ๋ ๋๋ฌ์ ๊ฐ์ ์ด๋ณ props๋ฅผ ํ
์ด๋ธ ์
์ ์ฃผ์
ํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ ๋ฐ์ดํฐ ์์ค์ ๋ํด ๋ณ๋์ ํ
์ด๋ธ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ํ์ ์์ด ๊ฐ ์ด์ ๋ชจ์๊ณผ ๋์์ ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
React.cloneElement๋ React ๊ฐ๋ฐ์์ ํดํท์์ ๊ท์คํ ๋๊ตฌ์
๋๋ค. ์ด๋ ๋ถ๋ณ์ฑ์ ์ ์งํ๊ณ ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ์ ์ด์งํ๋ฉด์ React ์์๋ฅผ ์์ ํ๊ณ ์์ฑ์ ์ฃผ์
ํ๋ ์ ์ฐํ๊ณ ๊ฐ๋ ฅํ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ๊ทธ ์ฌ์ฉ ์ฌ๋ก, ์ด์ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ดํดํจ์ผ๋ก์จ cloneElement๋ฅผ ํ์ฉํ์ฌ ๋ ๊ฒฌ๊ณ ํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ๋ฉฐ ์ ์ฐํ React ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
์ ์คํ๊ฒ ์ฌ์ฉํ๊ณ , ์ ์ ํ ๋ ๋์์ ๊ณ ๋ คํ๋ฉฐ, ํ์ด ์ฝ๋๋ฒ ์ด์ค๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ดํดํ๊ณ ์ ์ง๋ณด์ํ ์ ์๋๋ก ์ฝ๋๋ฅผ ๋ช ํํ๊ฒ ๋ฌธ์ํํ๋ ๊ฒ์ ๊ธฐ์ตํ์ญ์์ค.